<template>
  <div>
hgfgfiufihkf
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      option: {}
    };
  },
  mounted() {
    const dpetNames = ['市场部', '财务部', '产品部', '研发部', '大数据部', '生产部', '人事部', '化学部', '科学院', '证券部'];
    const points = [12, 23, 22, 1, 14, 32, 23, 24, 26];
    this.setOption(dpetNames, points, 0.4);
  },
  methods: {
    setOption(xAxisData, serieData, scale) {
      // const scale = 0.4;
      const c5 = 5 * scale;
      const c6 = 6 * scale;
      const c13 = 13 * scale;
      const c15 = 15 * scale;
      const c17 = 17 * scale;
      const c20 = 20 * scale;
      const c23 = 23 * scale;
      const c35 = 35 * scale;
      const distance = 0 * scale;

      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x + c17, shape.y];
          const c1 = [shape.x - c23, shape.y - c6];
          const c2 = [xAxisPoint[0] - c23, xAxisPoint[1] - c13];
          const c3 = [xAxisPoint[0] + c17, xAxisPoint[1]];
          ctx.moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        }
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function(ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x + c17, shape.y];
          const c2 = [xAxisPoint[0] + c17, xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + c35, xAxisPoint[1] - c15];
          const c4 = [shape.x + c35, shape.y - c15];
          ctx.moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        }
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: { x: 0, y: 0 },
        buildPath: function(ctx, shape) {
          const c1 = [shape.x + c17, shape.y];
          const c2 = [shape.x + c35, shape.y - c15]; // 右点
          const c3 = [shape.x - c5, shape.y - c20];
          const c4 = [shape.x - c23, shape.y - c6];
          ctx.moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        }
      });

      // 注册三个面图形
      echarts.graphic.registerShape('DwCubeLeft', CubeLeft);
      echarts.graphic.registerShape('DwCubeRight', CubeRight);
      echarts.graphic.registerShape('DwCubeTop', CubeTop);

      this.option = {
        backgroundColor: '#0E233E',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '4%',
          right: '5%',
          top: '15%',
          bottom: '14%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(101, 198, 231, 0.2)'
            }
          },
          axisTick: {
            show: true,
            color: 'rgba(101, 198, 231, 1)'
          },
          axisLabel: {
            margin: 12,
            fontSize: 12,
            color: 'rgba(101, 198, 231, 1)'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '分数',
            nameTextStyle: {
              color: 'rgba(101, 198, 231, 1)'
            },
            min: 0,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: 'rgba(101, 198, 231, 1)'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(101, 198, 231, 0.2)'
              }
            },
            splitNumber: 4
          }
        ],
        series: [
          {
            type: 'custom',
            name: '得分',
            animationDuration: 3000,
            animationEasing: 'cubicInOut',
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              location[0] -= distance;
              const xAxisPoint = api.coord([api.value(0), 0]);
              xAxisPoint[0] -= distance;
              return {
                type: 'group',
                children: [
                  {
                    type: 'DwCubeLeft',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: xAxisPoint
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          { offset: 0, color: '#C2F631' },
                          { offset: 1, color: '#08D3F7' }
                        ]
                      )
                    }
                  },
                  {
                    type: 'DwCubeRight',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: xAxisPoint
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          { offset: 0, color: '#A1D60D' },
                          { offset: 1, color: '#09C2E3' }
                        ]
                      )
                    }
                  },
                  {
                    type: 'DwCubeTop',
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: xAxisPoint
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#B1F244' },
                        { offset: 1, color: '#8EEC69' }
                      ])
                    }
                  }
                ]
              };
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1C9CFE' },
                { offset: 1, color: '#004A82' }
              ])
            },
            data: serieData
          }
        ]
      };
    }
  }
};
</script>

<style>

</style>